<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".att").each(function() {
                // var val = parseFloat($(this).text());
                var val = parseFloat($(this).attr("color"));
                var scale = chroma.scale(['white', 'red']);
                var color = scale(val).hex();
                $(this).attr("bgcolor", color);
            });
        })
    </script>
</head>
<style>
    table, th, td {border: 1px solid black}
</style>
<body>
    <h2>{{ title }}</h2>
    <table>
        <tr>
            <th>ID</th>
            <th>Question</th>
            <th>Answers</th>
            <th>Predicted</th>
            <th>Score</th>
            <th>Paragraph</th>
        </tr>
        {% for row in rows %}
            <tr>
                <td>{{ row.id }}</td>
                <td>
                    {% for qj in row.ques %}
                        {{ qj }}
                    {% endfor %}
                </td>
                <td>
                    {% for aa in row.a %}
                        <li>{{ aa }}</li>
                    {% endfor %}
                </td>
                <td>{{ row.ap }}</td>
                <td>{{ row.score }}</td>
                <td>
                    <table>
                    {% for xj, ypj, yp2j in zip(row.para, row.yp, row.yp2) %}
                        <tr>
                        {% set rowloop = loop %}
                        {% for xjk, ypjk in zip(xj, ypj) %}
                            <td class="att" color="{{ ypjk }}">
                            {% if row.y[0][0] == rowloop.index0 and row.y[0][1] <= loop.index0 <= row.y[1][1] %}
                                <b>{{ xjk }}</b>
                            {% else %}
                                {{ xjk }}
                            {% endif %}
                            </td>
                        {% endfor %}
                        </tr>
                        <tr>
                        {% for xjk, yp2jk in zip(xj, yp2j) %}
                            <td class="att" color="{{ yp2jk }}">-</td>
                        {% endfor %}
                        </tr>
                    {% endfor %}
                    </table>
                </td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>